<template>
  <div>
    <mt-header v-if="top" fixed id="header">
      <div slot="left" @click="$router.go(-1)">
        <img width="30px" src="@/assets/fh.svg" alt="" />
      </div>
      <img width="30px" slot="right" src="@/assets/fx.svg" alt="" />
      <img width="30px" slot="right" src="@/assets/gwc1.svg" alt="" />
    </mt-header>
    <mt-header v-else fixed id="header" title="">
      <div slot="left" @click="$router.go(-1)">
        <img width="30px" src="@/assets/fh (1).svg" alt="" />
      </div>
      <router-link class="rt" to="/" slot="right">
        <mt-button>商品</mt-button>
      </router-link>
      <router-link class="rt" to="/" slot="right">
        <mt-button>评价</mt-button>
      </router-link>
      <router-link class="rt" to="/" slot="right">
        <mt-button>推荐</mt-button>
      </router-link>
      <router-link class="rt" to="/" slot="right">
        <mt-button>详情</mt-button>
      </router-link>
      <img width="30px" slot="right" src="@/assets/fx2.svg" alt="" />
      <img width="30px" slot="right" src="@/assets/gwc3.svg" alt="" />
    </mt-header>
    <div>
      <img width="375px" id="img" :src="`${detail.c_pic}.jpg`" alt="" />
    </div>
    <div class="jg">
      <p>￥{{ detail.c_price }}</p>
      <p><img width="20px" src="@/assets/jg.svg" alt="" /> 降价通知</p>
    </div>
    <h3 class="h3">{{ detail.c_name }}</h3>
    <p class="p">{{ detail.c_title }}</p>
    <div class="hy">
      <span>开通卓越会员，购买此商品预计可获576积分</span>
      <button>去开通</button>
    </div>
    <div class="cd"></div>
    <div class="yx">
      <p>已选</p>
      <div @click="getPop">
        <p>1件</p>
        <img width="20px" src="@/assets/fh1.svg" alt="" />
      </div>
    </div>
    <div class="yx1">
      <p>配送</p>
      <div>
        <p>新梅园四季酒店</p>
        <p>
          有货，2022-1-15
          16:35前下单，预计2022-1-15前送达，依照您在结算页面选择的配送时间窗而定
        </p>
        <p style="color: #ccc">不支持7天无理由退换货</p>
      </div>
    </div>
    <div class="cd"></div>
    <mt-popup v-model="popupVisible" position="bottom">
      <div class="xq">
        <img width="100px" :src="`${detail.c_pic}.jpg`" alt="" />
        <div class="xq1">
          <p>{{ detail.c_name }}</p>
          <img @click="getuPop" class="img1" src="@/assets/fh1.svg" alt="" />
          <h3>￥{{ detail.c_price }}</h3>
        </div>
      </div>
      <p class="p1">配送重量 (含包装) : {{ detail.c_weight }}/份</p>
      <div class="xq2">
        <p>购买数量</p>
        <div>
          <button @click="xl--" :disabled="xl == 1">-</button>
          <span>{{ xl }}</span>
          <button @click="xl++">+</button>
        </div>
      </div>
      <div class="db" @click="getShop">加入购物车</div>
    </mt-popup>
    <mt-navbar style="background-color: rgb(199, 196, 196)" v-model="active">
      <mt-tab-item id="1">经常一起买</mt-tab-item>
      <mt-tab-item id="2">相似商品</mt-tab-item>
    </mt-navbar>
    <mt-tab-container style="margin-top: 0px" v-model="active">
      <mt-tab-container-item id="1">
        <mt-swipe style="height: 450px" :continuous="false">
          <mt-swipe-item>
            <ul class="ul">
              <li v-for="(item, index) in tjs" :key="index">
                <img :src="`${item.c_pic}.jpg`" alt="" /><button>极速达</button
                ><span>{{ item.c_name }}</span>
                <div class="gwc">
                  <p>¥{{ item.c_price }}</p>
                  <img src="@/assets/gwc.svg" alt="" />
                </div>
              </li>
            </ul>
          </mt-swipe-item>
          <mt-swipe-item>
            <ul class="ul">
              <li v-for="(item1, index) in tjs1" :key="index">
                <img :src="`${item1.c_pic}.jpg`" alt="" /><button>极速达</button
                ><span>{{ item1.c_name }}</span>
                <div class="gwc">
                  <p>¥{{ item1.c_price }}</p>
                  <img src="@/assets/gwc.svg" alt="" />
                </div>
              </li>
            </ul>
          </mt-swipe-item>
          <mt-swipe-item>
            <ul class="ul">
              <li v-for="(item2, index) in tjs2" :key="index">
                <img :src="`${item2.c_pic}.jpg`" alt="" /><button>极速达</button
                ><span>{{ item2.c_name }}</span>
                <div class="gwc">
                  <p>¥{{ item2.c_price }}</p>
                  <img src="@/assets/gwc.svg" alt="" />
                </div>
              </li>
            </ul>
          </mt-swipe-item>
        </mt-swipe>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <mt-swipe style="height: 450px" :continuous="false">
          <mt-swipe-item>
            <ul class="ul">
              <li v-for="(item, index) in tjs" :key="index">
                <img :src="`${item.c_pic}.jpg`" alt="" /><button>极速达</button
                ><span>{{ item.c_name }}</span>
                <div class="gwc">
                  <p>¥{{ item.c_price }}</p>
                  <img src="@/assets/gwc.svg" alt="" />
                </div>
              </li>
            </ul>
          </mt-swipe-item>
          <mt-swipe-item>
            <ul class="ul">
              <li v-for="(item1, index) in tjs1" :key="index">
                <img :src="`${item1.c_pic}.jpg`" alt="" /><button>极速达</button
                ><span>{{ item1.c_name }}</span>
                <div class="gwc">
                  <p>¥{{ item1.c_price }}</p>
                  <img src="@/assets/gwc.svg" alt="" />
                </div>
              </li>
            </ul>
          </mt-swipe-item>
          <mt-swipe-item>
            <ul class="ul">
              <li v-for="(item2, index) in tjs2" :key="index">
                <img :src="`${item2.c_pic}.jpg`" alt="" /><button>极速达</button
                ><span>{{ item2.c_name }}</span>
                <div class="gwc">
                  <p>¥{{ item2.c_price }}</p>
                  <img src="@/assets/gwc.svg" alt="" />
                </div>
              </li>
            </ul>
          </mt-swipe-item>
        </mt-swipe>
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-navbar v-model="active1">
      <mt-tab-item id="1">图文详情</mt-tab-item>
      <mt-tab-item id="2">规格参数</mt-tab-item>
    </mt-navbar>
    <mt-tab-container style="margin-top: 5px" v-model="active1">
      <mt-tab-container-item id="1">
        <div v-for="(item, i) in pics" :key="i">
          <img width="100%" :src="`${item.sm}.jpg`" alt="" />
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div>
          <div class="mod_tit_line">
            <h3>商品参数</h3>
          </div>
          <div id="detParam">
            <table
              cellpadding="0"
              cellspacing="1"
              width="100%"
              border="1"
              class="Ptableparam_table"
            >
              <tbody>
                <tr>
                  <td>商品编号</td>
                  <td>{{ detail.cid }}</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td class="tdTitle">产地</td>
                  <td>{{ detail.c_origin }}</td>
                </tr>
                <tr>
                  <td class="tdTitle">产品净含量</td>
                  <td>{{ detail.c_weight }}</td>
                </tr>
                <tr>
                  <td class="tdTitle">保质期</td>
                  <td>{{ detail.c_period }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
    <div class="cd"></div>
    <div class="ts">
      <h3>温馨提示</h3>
      <p>
        为了更好的服务零售顾客，让更多的顾客能享受山姆会员商店的优质优价商品，山姆会员商店不接受对同一商品在同一天的各类重复订单，并保留取消订单的权力
      </p>
      <h4>如有大单需求，请联系大客户客服：400-633-6868</h4>
    </div>
    <p style="background-color: rgb(199, 196, 196)">为你推荐</p>
    <footer>
      <div class="footer-left">
        <img width="30px" src="@/assets/wjx.svg" alt="" />
        <p>收藏</p>
      </div>
      <div @click="getShop" class="footer-right">加入购物车</div>
    </footer>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      active1: "1",
      active: "1",
      selected: "main",
      h: "300px",
      popupVisible: false,
      xl: 1,
      n: 1,
      top: true,
      detail: {},
      pics: [],
      tjs: [],
      tjs1: [],
      tjs2: [],
    };
  },
  methods: {
    getPop() {
      this.popupVisible = true;
    },
    getuPop() {
      this.popupVisible = false;
    },
    handleScroll() {
      var scrollTop = window.pageYOffset;
      // console.log(scrollTop)
      if (scrollTop > 200) {
        this.top = false;
      } else {
        this.top = true;
      }
    },
    getShop() {
      let uid = this.$store.state.uid;
      let cid = this.detail.cid;
      let pic = this.detail.c_pic;
      let name = this.detail.c_name;
      let price = this.detail.c_price;
      let num = this.xl;
      console.log(uid);
      console.log(cid);
      console.log(pic);
      console.log(name);
      console.log(price);
      console.log(num);
      this.axios
        .post(
          "/shop/shopcar",
          `pid=${uid}&shop_id=${cid}&shoppic=${pic}&shopname=${name}&shopprice=${price}&count=${num}`
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            MessageBox.alert("添加成功");
          }
        });
    },
    gettuijian() {
      let r = Math.floor(Math.random() * 60 + 1);
      this.axios.get(`/shop/tuijian?page=${r}`).then((res) => {
        this.tjs = res.data.data;
        console.log(res);
      });
    },
    gettuijian1() {
      let r = Math.floor(Math.random() * 60 + 1);
      this.axios.get(`/shop/tuijian?page=${r}`).then((res) => {
        this.tjs1 = res.data.data;
        console.log(res);
      });
    },
    gettuijian2() {
      let r = Math.floor(Math.random() * 60 + 1);
      this.axios.get(`/shop/tuijian?page=${r}`).then((res) => {
        this.tjs2 = res.data.data;
        console.log(res);
      });
    },
  },
  mounted() {
    this.gettuijian();
    this.gettuijian1();
    this.gettuijian2();
    let screenw = window.screen.width;
    let pciw = 220;
    let pich = 220;
    let swipeh = Math.floor((pich * screenw) / pciw) + "px";
    this.h = swipeh;
    let cid = this.$route.query.cid;
    window.addEventListener("scroll", this.handleScroll, true);
    this.axios.get(`/shop/details?cid=${cid}`).then((res) => {
      console.log(res);
      this.detail = res.data.result[0];
      this.pics = res.data.data;
    });
  },
};
</script>
<style>
.Ptableparam_table {
  width: 100%;
  margin-bottom: 10px;
  border-collapse: collapse;
  font-size: 12px;
  border-spacing: 0;
  line-height: 18px;
  border: 1px solid black;
}
.mod_tit_line {
  border-top: 1px solid #ddd;
  text-align: center;
  height: 6px;
  margin: 16px 0 10px;
}
.ul2 .gwc {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  line-height: 30px;
  font-size: 18px;
  color: red;
  font-weight: bold;
}
.ul2 > li img {
  width: 100%;
}
.ul2 .gwc img {
  width: 30px;
}
.ul2 > li span {
  line-height: 20px;
  margin: 5px;
  font-weight: bold;
}
.ul2 > li button {
  border: 0;
  background-color: tomato;
  color: #fff;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 5px;
}
.ul2 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: rgb(199, 196, 196);
}
.ul2 > li {
  width: 46%;
  background-color: white;
  margin-bottom: 10px;
}
.ul2 li img {
  width: 100%;
}
.ts h4 {
  position: absolute;
  top: 140px;
  left: 10px;
  text-align: left;
  font-size: 13px;
}
.ts {
  position: relative;
  height: 200px;
}
.ts h3 {
  position: absolute;
  top: 10px;
  left: 20px;
  font-weight: bold;
}
.ts p {
  position: absolute;
  top: 40px;
  left: 10px;
  font-size: 13px;
  line-height: 30px;
  text-align: left;
}
.rt {
  margin-right: 20px;
}
.ul .gwc {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  line-height: 30px;
  font-size: 18px;
  color: red;
  font-weight: bold;
}
.ul .gwc img {
  width: 30px;
}
.ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  font-size: 12px;
  background-color: rgb(199, 196, 196);
}
.ul > li span {
  display: block;
  line-height: 20px;
  margin: 5px;
  font-weight: bold;
  width: 95%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ul > li button {
  border: 0;
  background-color: tomato;
  color: #fff;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 5px;
}
.ul > li img {
  width: 100%;
  border-radius: 7px;
}
.ul > li {
  width: 30%;
  background-color: wheat;
  border-radius: 7px;
  margin-bottom: 10px;
}
.yx1 {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.yx1 p {
  margin: 20px;
}
.yx1 div {
  width: 80%;
  text-align: left;
}
.db {
  height: 40px;
  padding: 10px 100px;
  background-color: rgb(46, 46, 223);
  line-height: 40px;
  color: #fff;
  text-align: center;
}
.xq2 > div > button {
  background-color: white;
  border: 0;
  font-size: 24px;
}
.xq2 > div > span {
  background-color: rgb(159, 186, 236);
  border: 0;
  display: inline-block;
  width: 40px;
  color: blue;
  text-align: center;
}
.xq2 {
  display: flex;
  justify-content: space-between;
  margin: 20px;
  line-height: 30px;
}
.p1 {
  position: absolute;
  left: 20px;
  top: 130px;
}
.xq {
  width: 350px;
  padding: 20px;
  display: flex;
}
.xq .xq1 {
  margin-top: 10px;
}
.xq .xq1 h3 {
  margin: 40px;
  position: absolute;
  left: 75px;
  font-size: 24px;
  color: red;
}
.xq .xq1 .img1 {
  width: 20px;
  position: absolute;
  right: 10px;
  top: 20px;
  border: 0;
}
.yx p {
  margin: 20px;
}
.yx div {
  width: 80%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid slategrey;
}
.yx {
  display: flex;
  justify-content: space-between;
}
.cd {
  height: 10px;
  width: 100%;
  background-color: rgb(199, 196, 196);
}
.hy {
  width: 90%;
  height: 50px;
  background-color: burlywood;
  margin: 10px 10px 10px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 50px;
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
}
.hy > button {
  background-color: black;
  color: #fff;
  border: 0;
  width: 80px;
  height: 30px;
  margin-top: 10px;
  border-radius: 3px;
  text-align: center;
  line-height: 30px;
}
#img {
  margin-top: 40px;
}
#header {
  background-color: #fff;
  color: #000;
}
footer {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: white;
  display: flex;
}
.footer-left {
  text-align: center;
  width: 30%;
}
.footer-right {
  text-align: center;
  width: 70%;
  line-height: 50px;
  background-color: rgb(46, 46, 223);
  color: #fff;
}
.jg {
  display: flex;
  justify-content: space-between;
  margin: 0 5px;
  margin-bottom: 10px;
}
.jg :first-child {
  color: red;
}
.h3 {
  font-weight: bold;
  margin: 10px;
}
.p {
  position: relative;
  color: rgb(199, 196, 196);
  font-size: 12px;
  margin: 10px;
  line-height: 15px;
}
</style>
